<template>
  <div class="base-info">
    <div class="avatar">
      <img :src="info.avatar"/>
    </div>
    <div class="clearfix">
      <div class="left">
        <div class="input-group clearfix">
          <div class="left-title">
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
          </div>
          <div class="right-content">
            {{info.username}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
          </div>
          <div class="right-content">
            {{info.sex}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            出生日期：
          </div>
          <div class="right-content">
            {{info.birthday}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            毕业院校：
          </div>
          <div class="right-content">
            {{info.graduate_from}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            现教阶段：
          </div>
          <div class="right-content">
            {{info.teach_section}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            机构学校：
          </div>
          <div class="right-content">
            {{info.school}}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="input-group clearfix">
          <div class="left-title">
            最高学历：
          </div>
          <div class="right-content">
            {{info.education || '-'}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            教&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
          </div>
          <div class="right-content">
            {{info.job_age}}年
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            教师职称：
          </div>
          <div class="right-content">
            {{info.job_level}}
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">
            教师简介：
          </div>
          <div class="right-content">
            {{info.intro}}
          </div>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <button class="normal-btn-outline" @click="goEdit">编辑基本信息</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      info: {}
    }
  },
  created() {
    this.$store.dispatch('GetInfo')
    .then(res => {
      console.log(res)
      if (res.extra) {
        this.info = {
          ...this.info,
          ...res.info,
          ...res.extra.profile
        }
      } else {
        this.info = {
          ...this.info,
          ...res.info
        }
      }
      console.log(this.info)
    })
    .catch(err => console.log(err))
  },
  methods: {
    goEdit() {
      this.$router.push('/personal/teacher-info/base-info/edit')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.base-info{
  .avatar{
    width: 180px;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .left{
    float: left;
    width: 50%;
    border-right: 1px solid #e5e6e7;
  }
  .right{
    float: left;
    width: 50%;
  }
  .input-group{
    width: 325px;
    margin: 0 auto;
    margin-bottom: 14px;
    .left-title{
      width: 90px;
      float: left;
      line-height: 30px;
      text-align: right;
    }
    .right-content{
      width: 235px;
      line-height: 30px;
      float: left;
    }
  }
  .btn-group{
    margin: 80px auto;
    text-align: center;
    .normal-btn-outline{
      width: 100px;
    }
  }
}
</style>